.rank-list {
  .top {
    display: flex;
    .top-left {
      width: 70%;
      height: 250px;
    }
    .top-right {
      width: 30%;
      height: 200px;
      .nav {
        display: flex;
        justify-content: space-between;
        .menu {
          padding: 15px 20px;
          border-radius: 8px;
          box-shadow: 0 20px 27px rgba(0, 0, 0, 0.2);
          cursor: pointer;
        }
        .menu-active {
          background-color: #409eff;
          color: white;
        }
      }
      .list {
        width: 100%;
        display: grid;
        grid-template-columns: calc(50% - 10px) calc(50% - 10px);
        grid-gap: 20px;
        margin-top: 20px;
        .item {
          margin-bottom: 10px;
          padding: 15px;
          border-radius: 8px;
          box-shadow: 0 20px 27px rgba(0, 0, 0, 0.2);
          display: flex;
          justify-content: space-around;
          align-items: center;
          cursor: pointer;
          .title {
            font-weight: 600;
            font-size: 14px;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .update {
            margin-top: 5px;
            font-size: 12px;
          }
          .img {
            width: 50px;
            height: 50px;
            border-radius: 8px;
          }
        }
        .item-active {
          background: linear-gradient(135deg, #ffffff 20%, #ffb08e 100%);
        }
      }
    }
  }


}
